import { Meta } from '@storybook/addon-docs';

<Meta title="Design system/Badges" />

<h1 class="text-xl font-semibold mb-lg">Badges</h1>

<h2 class="text-lg font-semibold mb-xs">Neutral Badges</h2>
<p class="mb-md text-muted mb-0">
  We have a number of neutral badges which can be uses as indicators.
</p>
<p class="mb-md text-muted mb-md">
  `tracking-wide` is used on the text is to help with readability with the
  smaller display text.
</p>

<div class="flex items-center mb-lg">
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-gray-100 text-gray-800">
    Label
  </span>
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-indigo-100 text-indigo-800">
    Label
  </span>
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-blue-100 text-blue-800">
    Label
  </span>
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-purple-100 text-purple-800">
    Label
  </span>
</div>

<h2 class="text-lg font-semibold mb-xs">Positive & Negative Indicators</h2>
<p class="mb-md text-muted mb-sm">The green and red badges should be </p>
<div class="flex items-center">
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-green-100 text-green-800">
    Positive
  </span>
  <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-red-100 text-red-800">
    Negative
  </span>
</div>
